<template>
  <div class="ethernet-config-container">
    <el-card shadow="never">
      <div slot="header" class="config-header">以太网配置</div>

      <!-- Ethernet Interfaces Table -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            ref="ethernetForm"
            :model="ethernetInterfacesForm"
            :rules="ethRules"
            size="mini"
            label-width="150px"
          >
            <el-table :data="ethernetInterfacesForm.eth" border fit size="mini">
              <el-table-column prop="ethName" label="设备名称"></el-table-column>
              <el-table-column label="IP地址">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`eth.${scope.$index}.ip`"
                    :rules="ethRules.ip"
                    label-width="0"
                  >
                    <el-input v-model="scope.row.ip"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="子网掩码">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`eth.${scope.$index}.netMask`"
                    :rules="ethRules.netMask"
                    label-width="0"
                  >
                    <el-input v-model="scope.row.netMask"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="默认网关">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`eth.${scope.$index}.gateWay`"
                    :rules="ethRules.gateWay"
                    label-width="0"
                  >
                    <el-input v-model="scope.row.gateWay"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-col>
      </el-row>

      <!-- Communication Settings -->
      <el-row :gutter="10" class="communication-settings-row">
        <el-col :span="24">
          <!-- <el-card> -->
          <div class="notice-header">通告设置</div>
          <el-form
            ref="noticeForm"
            :model="notice"
            :rules="commRules"
            :hide-required-asterisk="true"
            size="mini"
            label-width="150px"
          >
            <el-row :gutter="10">
              <el-col :span="9">
                <el-form-item label="目的IP地址:" prop="serverIp">
                  <el-input v-model="notice.serverIp"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="4">
                <el-form-item label="目的UDP端口:" prop="serverPort">
                  <el-input v-model.number="notice.serverPort"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="9">
                <el-form-item label="设备信息通告周期:" prop="infoTime">
                  <el-input v-model.number="notice.infoTime"></el-input>
                  <span class="description">秒 (1~255, 0表示不通告)</span>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="4">
                <el-form-item label="统计报告通告周期:" prop="countTime">
                  <el-input v-model.number="notice.countTime"></el-input>
                  <span class="description">秒 (1~255, 0表示不通告)</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- </el-card> -->
        </el-col>
      </el-row>

      <!-- Save Button -->
      <!-- <el-row :gutter="10" class="save-button-row">
        <el-col :span="24" class="align-right">
          <el-button type="primary" @click="saveEthernetConfig">保存</el-button>
        </el-col>
      </el-row> -->

    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

var validatePort = (rule, value, callback) => {
  const portPattern = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
  if (value === undefined || value === null || value.toString().trim() === '') {
    callback(new Error('端口不能为空'))
  } else if (portPattern.test(value)) {
    callback()
  } else {
    callback(new Error('端口号范围应在0到65535之间'))
  }
}
export default {
  data() {
    const validateIP = (rule, value, callback) => {
      const ipRegex =
        /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/
      if (!ipRegex.test(value)) {
        callback(new Error('请输入有效的IP地址格式'))
      } else {
        callback()
      }
    }

    return {
      // ethernetInterfacesForm: {
      //   eth: []
      // },
      // notice: {
      //   serverIp: '',
      //   serverPort: 11000,
      //   countTime: 10,
      //   infoTime: 1
      // },
      ethRules: {
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' }
        ],
        netMask: [
          { required: true, message: '请输入子网掩码', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' }
        ],
        gateWay: [
          { required: true, message: '请输入默认网关', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' }
        ]
      },
      commRules: {
        serverIp: [
          { required: true, message: '请输入目的IP地址', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' }
        ],
        serverPort: [
          { required: true, message: '请输入目的UDP端口', trigger: 'blur' },
          { validator: validatePort, trigger: 'blur' }
        ],
        countTime: [
          { required: true, message: '请输入通告周期', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            max: 255,
            message: '通告周期范围1~255，0表示不通告',
            trigger: 'blur'
          }
        ],
        infoTime: [
          { required: true, message: '请输入通告周期', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            max: 255,
            message: '通告周期范围1~255，0表示不通告',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['SysCfgInfo']),
    ethernetInterfacesForm() {
      return this.SysCfgInfo
    },
    notice() {
      return this.SysCfgInfo.notice
    }
  },
  methods: {
    save() {
      // Validate all forms before saving
      return new Promise((resolve, reject) => {
        this.$refs.ethernetForm.validate((validEthernet) => {
          if (validEthernet) {
            this.$refs.noticeForm.validate((validComm) => {
              if (validComm) {
              // All forms are valid, proceed with saving
                resolve(true)
              } else {
                this.$message.warning('以太网标签页通告设置表单校验失败')
                resolve(false)
              }
            })
          } else {
            this.$message.warning('以太网标签页以太网配置表单校验失败')
            resolve(false)
          }
        })
      })
    },
    getSettings() {
      this.$nextTick(() => this.$refs.ethernetForm.clearValidate())
      this.$nextTick(() => this.$refs.noticeForm.clearValidate())
    }
  }
}
</script>

<style lang="scss" scoped>
.ethernet-config-container {
  padding: 10px;
}

.config-header {
  font-size: 16px;
  font-weight: bold;
}
.notice-header{
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 20px;
}

.device-alias-row {
  margin-bottom: 10px;
}

.device-alias-row .el-input {
  width: 100%;
}

.communication-settings-row {
  margin-top: 10px;
}

.save-button-row {
  margin-top: 15px;
  text-align: right;
}

.align-right {
  text-align: right;
}

.description {
  font-size: 12px;
  color: #888;
}

::v-deep .el-table td,
.el-table th {
  padding: 5px 0;
}
</style>
